import React from 'react';
import ReactDOM from 'react-dom';
class ViewList extends React.Component {
    //init
    constructor(props) {
        super(props);

        this.state = {
            page: {
                current: 1,
                pageSize: 2
            }
        };

    }

    render() {
        const { items, isFetching, delFun } = this.props;
        let ids;
        let self = this;

        if (isFetching) {
            ids = <tr><td>loading</td></tr>
        } else {
            if (items.length == 0) {
                ids = <tr><td>Nothing</td></tr>
            } else {
                ids = items.map(function (item, i) {
                    return <tr key={item._id}>
                        <td>{i + 1}</td>
                        <td>{item.email}</td>
                        <td>{item.passwd}</td>
                        <td>{item.url}</td>
                        <td><button type="button" className="btn btn-default" onClick={delFun.bind(this, item._id)}>del</button></td>
                    </tr>
                });
            }
        }

        return (
            <div ref="pp">
                <div className="table-responsive">
                    <table className="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Email</th>
                                <th>Password</th>
                                <th>URL</th>
                                <th>OPT</th>
                            </tr>
                        </thead>
                        <tbody>
                            {ids}
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
}

ViewList.propTypes = {
    delFun: React.PropTypes.func,
    items: React.PropTypes.array,
    isFetching: React.PropTypes.bool.isRequired,
}

ViewList.defaultProps = {
    items: [],
    isFetching: true
};

export default ViewList;
//export default connect(select, null, null, { withRef: true })(ViewList);
